import  React, { Component } from 'react';
import { connect } from 'react-redux';
import { ListItem ,ListInfo,LoadMore } from '../style';
import { Link } from 'react-router-dom'
import { actionCreaters }  from '../store'
class List extends Component{
    render(){
        const {articleList,getMoreList} =this.props;
        const newList=articleList.toJS();
        if(newList.length){
                return(
                    <div>
                        {
                            newList.map((item,index)=>{
                                return(
                                    <Link key={index} to={'/detail/'+ item.id}>
                                        <ListItem>
                                            <img className="pic" src={item.imgUrl} alt="列表"/>
                                            <ListInfo>
                                                <h3 className="title">{item.title}</h3>
                                                <p className="desc">{item.desc}</p>
                                            </ListInfo>
                                        </ListItem>
                                    </Link>
                                )
                            })
                        }
                        <LoadMore onClick={getMoreList}>更多文字</LoadMore>
                    </div>
                )
        }else{
            return(<div></div>)
        }

    }
}

const mapStateToProps=(state)=>{
    return{
        //immutabled对象的get方法
        articleList:state.getIn(['home','articleList']),
    }
};
const mapDispatchToProps=(dispatch)=>{
    return{
        getMoreList(){
            dispatch(actionCreaters.getMore())
        }
    }
};
export default connect(mapStateToProps,mapDispatchToProps)(List);